<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>我的购物车</title>
	<link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/cart.css" />
</head>

<body>
<div id="app">
	<!--页面顶部-->
	<div id="nav-bottom" style="background: white;">
		<!--顶部-->
		<div class="nav-top">
			<div class="top">
				<div class="py-container" >
					<div class="shortcut">
						<ul class="fl">
							<li class="f-item">您好！</li>
							<li class="f-item">  请<a href="login.html" target="_blank" style="padding-left: 10px;">登录</a>　<span><a href="register.html" target="_blank">免费注册</a></span></li>
						</ul>
						<ul class="fr">
							<li class="f-item">我的订单</li>
							<li class="f-item space"></li>
							<li class="f-item">我的FM</li>
							<li class="f-item space"></li>
							<li class="f-item">FM会员</li>
							<li class="f-item space"></li>
							<li class="f-item">企业采购</li>
							<li class="f-item space"></li>
							<li class="f-item">客户服务</li>
							<li class="f-item space"></li>
							<li class="f-item">客户服务</li>
							<li class="f-item space"></li>
							<li class="f-item">网站导航</li>
						</ul>
					</div>
				</div>
			</div>
			<!--头部-->
			<div class="header" style="border-bottom: none;">
				<div class="py-container" style="background: white;">
					<div class="yui3-g Logo">
						<div class="yui3-u Left logoArea" style="padding-top: 40px;">
							<img src="img/logo.png" width="60" height="60" alt="" style="float:left; margin-right: 10px;">
							<div style="font-size: 28px; color: #2b2b2b; margin-top: 18px;">FM商城</div>
						</div>
						<div class="yui3-u Center searchArea" style="position: absolute; right: 238px; top: 30px;">
							<div class="search">
								<form action="" class="sui-form form-inline">
									<div class="input-append">
										<input type="text" id="autocomplete" type="text" class="input-error input-xxlarge" />
										<a class="sui-btn btn-xlarge btn-danger" href="search.html">搜索</a>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="cart py-container">
		<!--所有商品-->
		<div class="allgoods">
			<h4 style="color: #E2231A; font-size: 18px">全部商品<span>2</span></h4>
			<div class="cart-main">
				<div class="yui3-g cart-th">
					<div class="yui3-u-1-4"><input type="checkbox" name="" value="" /> 全部</div>
					<div class="yui3-u-1-4">商品</div>
					<div class="yui3-u-1-8">单价（元）</div>
					<div class="yui3-u-1-8">数量</div>
					<div class="yui3-u-1-8">小计（元）</div>
					<div class="yui3-u-1-8">操作</div>
				</div>
				<div class="cart-item-list" v-for="carItem in cartList" >
					<div class="cart-shop">
						<input type="checkbox" name=""/>
						<span class="shopname self">{{carItem.sellerName}}</span>
					</div>
					<div class="cart-body">
						<div class="cart-list" v-for="orderItem in carItem.orderItemList">
							<ul class="goods-list yui3-g">
								<li class="yui3-u-1-24">
									<input type="checkbox" name="" />
								</li>
								<li class="yui3-u-11-24">
									<div class="good-item">
										<div class="item-img"><img :src="orderItem.picPath" /></div>
										<div class="item-msg">{{orderItem.title}}</div>
									</div>
								</li>
								<li class="yui3-u-1-8"><span class="price">{{orderItem.price}}</span></li>
								<li class="yui3-u-1-8">
									<a href="javascript:void(0)" class="increment mins">-</a>
									<input autocomplete="off"
										   type="text"
										   value="1"
										   minnum="1"
										   class="itxt"
										   v-model="orderItem.num"
									/>
									<a href="javascript:void(0)" class="increment plus">+</a>
								</li>
								<li class="yui3-u-1-8"><span class="sum">{{orderItem.price * orderItem.num}}</span></li>
								<li class="yui3-u-1-8">
									<a href="#none">删除</a><br />
									<a href="#none">移到我的关注</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="cart-tool" style="height: 51px;">
				<div class="select-all">
					<input type="checkbox" name="" id="" value="" />
					<span>全选</span>
				</div>
				<div class="option" style="position: relative; overflow: visible">
					<a href="#none">删除选中的商品</a>
					<a href="#none">移到我的关注</a>
					<a href="#none">清除下柜商品</a>

				</div>
				<div class="toolbar" style="margin-right: 100px; position: relative;">
					<div class="chosed">已选择<span>{{totalValue.totalNum}}</span>件商品</div>
					<div class="sumprice">
						<span><em>总价（不含运费） ：</em><i class="summoney">¥{{totalValue.totalMoney}}</i></span>
					</div>

					<div class="sumbtn" style="height: 45px; position: absolute; right: -100px;top: 0; z-index: 9999;">
						<a class="sum-btn" href="http://localhost:8084/getOrderInfo.html">结算</a>
					</div>
				</div>

			</div>

			<div class="clearfix"></div>
			<div class="deled">

				<div class="cart-list del">
					<ul class="goods-list yui3-g">
						<li class="yui3-u-1-6"><span>已删除商品，您可以重新购买或加关注：</span></li>
					</ul>
				</div>
			</div>

		</div>
	</div>
	<!--页面底部-->
	<div class="clearfix footer">
		<div class="py-container">
			<div class="footlink">
				<div class="Mod-service">
					<div class="mod_service" clstag="h|keycount|btm|btmnavi_null01">
						<div class="grid_c1 mod_service_inner">
							<ul class="mod_service_list">
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_duo">多</h5>
										<p class="mod_service_txt">品类齐全，轻松购物</p>
									</div></li>
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_kuai">快</h5>
										<p class="mod_service_txt">多仓直发，极速配送</p>
									</div></li>
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_hao">好</h5>
										<p class="mod_service_txt">正品行货，精致服务</p>
									</div></li>
								<li class="mod_service_item">
									<div class="mod_service_unit">
										<h5 class="mod_service_tit mod_service_sheng">省</h5>
										<p class="mod_service_txt">天天低价，畅选无忧</p>
									</div></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="clearfix Mod-list">
					<div class="yui3-g">
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">购物指南</h5>
							<ul class="unstyled">
								<li>购物流程</li>
								<li>会员介绍</li>
								<li>生活旅行/团购</li>
								<li>常见问题</li>
								<li>购物指南</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">配送方式</h5>
							<ul class="unstyled">
								<li>上门自提</li>
								<li>211限时达</li>
								<li>配送服务查询</li>
								<li>配送费收取标准</li>
								<li>海外配送</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">支付方式</h5>
							<ul class="unstyled">
								<li>货到付款</li>
								<li>在线支付</li>
								<li>分期付款</li>
								<li>邮局汇款</li>
								<li>公司转账</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">售后服务</h5>
							<ul class="unstyled">
								<li>售后政策</li>
								<li>价格保护</li>
								<li>退款说明</li>
								<li>返修/退换货</li>
								<li>取消订单</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<h5 style="font-size: 15px;">特色服务</h5>
							<ul class="unstyled">
								<li>夺宝岛</li>
								<li>DIY装机</li>
								<li>延保服务</li>
							</ul>
						</div>
						<div class="yui3-u-1-6">
							<div class="mod_help_cover">
								<h5 class="mod_help_cover_tit">自营覆盖区县</h5>
								<div class="mod_help_cover_con">
									<p class="mod_help_cover_info">已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
									<p class="mod_help_cover_more">
										<a href="//help.jd.com/user/issue/103-983.html" target="_blank">查看详情
										</a>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="Mod-copyright">
					<ul class="helpLink">
						<li>关于我们<span class="space"></span></li>
						<li>联系我们<span class="space"></span></li>
						<li>联系客服<span class="space"></span></li>
						<li>合作招商<span class="space"></span></li>
						<li>商家帮助<span class="space"></span></li>
						<li>营销中心<span class="space"></span></li>
						<li>友情链接<span class="space"></span></li>
						<li>销售联盟<span class="space"></span></li>
						<li>友情链接<span class="space"></span></li>
						<li>隐私政策</li>
					</ul>
					<p>京公网安备 1****002000088号|京ICP证0*****9号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大1*****2号</p>
					<p>京ICP备0*****1号京公网安备1***********2</p>
				</div>
			</div>
		</div>
	</div>
</div>



</body>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="plugins/vue/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="plugins/vue/axios-0.18.0.js"></script>
<script type="text/javascript" src="plugins/vue/qs.js"></script>
<script>
	new Vue({
		el: "#app",
		data: {
			cartList: [],//购物车列表
			totalValue: {
				totalNum: 0,
				totalMoney: 0
			} //总价
		},
		methods:{
			loadCartData: function () {
				var _this = this;
				axios.post("/cart/findCartList.do")
						.then(function (response) {
							console.log(response.data);
							_this.cartList = response.data;
							_this.totalValue = _this.sum(_this.cartList);
							console.log(_this.totalValue);
							console.log(_this.cartList);
						}).catch(function (reason) {
					console.log(reason);
				})
			},
			sum:function(cartList){
				var totalValue={totalNum:0,totalMoney:0 };
				for(var i=0;i<cartList.length ;i++){
					var cart=cartList[i];//购物车对象
					for(var j=0;j<cart.orderItemList.length;j++){
						var orderItem=  cart.orderItemList[j];//购物车明细
						totalValue.totalNum+=orderItem.num;//累加数量
						totalValue.totalMoney+=orderItem.price*orderItem.num;//累加金额

					}
				}
				return totalValue;
			}
		},
		created:function () {
			this.loadCartData();
		}

	})
</script>

</html>